Diseño de dos landing pages orientadas a captación SEO para Liberbank — un simulador hipotecario que estima la cuota en tiempo real y un buscador de oficinas y cajeros con mapa.
cliente
Liberbank
rol
Product Design
equipo
1 Designer · 1 Dev
año
2022
/contexto — 01
Dos landing para captar tráfico y convertirlo.
Liberbank necesitaba posicionar dos servicios clave de forma orgánica: la contratación de hipotecas y la localización de oficinas. La petición era crear una calculadora de hipoteca personalizada que facilitara al usuario una simulación lo más fiable posible, y un buscador de sucursales — ambos como landing pages independientes con distintas secciones de contenido pensadas para SEO.
objetivo
Atraer a posibles solicitantes de hipoteca mediante una landing con estrategia SEO, y facilitar el acceso a la información de contacto de cada sucursal bancaria.
solución
Una landing con calculadora que estima la cuota mensual orientada por el banco, más secciones de contenido que refuerzan las keywords, y un buscador de oficinas con mapa y filtros.
/estrategia — 02
Diseñar para el SEO sin sacrificar la claridad.
El reto no era solo mostrar un simulador, sino construir una página que Google entendiera y que el usuario quisiera leer. Estudié los contenidos —imágenes y wording— y apliqué las guías de estilo del cliente para que cada bloque cumpliera doble función: reforzar las keywords y resolver una duda real de quien contrata una hipoteca.
bloque 01
¿Qué hipoteca va más contigo?
Comparativa fija vs. variable que aterriza las keywords y educa antes de simular.
bloque 02
¿Por qué Liberbank?
Propuesta de valor y confianza — el argumento comercial integrado en la narrativa.
bloque 03
La letra pequeña, en grande
Condiciones y transparencia legal, tratadas como contenido y no como nota al pie.
/wireframes — 03
Definir la estructura antes que el estilo.
Diseñé los wireframes y la estructura de ambas páginas para presentarlas y validarlas con el equipo y los stakeholders de Liberbank. Trabajar la jerarquía y el orden de los contenidos en baja definición permitió cerrar la arquitectura de la información antes de invertir en el diseño final.
Seis wireframes cubren los estados clave del simulador y del buscador — de los filtros a los resultados sobre el mapa.
/solución — 04
El simulador: calcular la cuota en tiempo real.
La calculadora deja al usuario ajustar importe, plazo, ahorros y provincia con sliders, y compara al instante hipoteca fija y variable, con y sin productos combinados. El bloque de resultado muestra cuota mensual, TIN y TAE en paralelo, y cierra con los tres pasos para solicitarla — de la simulación al contacto con la oficina.
Filtros a la izquierda, comparación en paralelo a la derecha y el flujo de solicitud en tres pasos, todo en una vista.
El contenido educativo «¿Qué hipoteca va más contigo?» — comparativa fija vs. variable que refuerza las keywords y prepara la conversión.
/solución — 05
Buscador de oficinas y cajeros.
La segunda landing localiza la sucursal más cercana. Filtros por tipo de oficina —autoservicio, emblemática, rural, urbana— y geolocalización «mostrar cerca de mí» sobre un mapa con marcadores codificados por color. Cada oficina expone horario, servicios disponibles, teléfono y accesos directos a «cómo llegar» y «pedir cita».
Ficha de oficina: mapa, servicios, horario y estado en tiempo real — leyenda de tipos de oficina codificada por color.
Listado y mapa sincronizados: resultados ordenados por distancia con la ubicación reflejada en el mapa.
/decisiones — 06
Decisiones, no pantallas.
decisión 01
Comparar fija y variable en una sola vista
Mostrar las dos modalidades —y las variantes con y sin productos combinados— en paralelo, sin recargar. El usuario decide comparando, que es como realmente elige una hipoteca.
por qué importa
Reduce la fricción: la decisión más difícil del producto se resuelve en una pantalla, no en un flujo de varios pasos.
decisión 02
Contenido SEO integrado, no añadido
En lugar de rellenar con texto para el buscador, cada sección responde a una pregunta real —comparativa, ventajas, condiciones— de forma que las keywords viven dentro de contenido útil.
trade-off aceptado
Una página más larga a cambio de que posicione y de que el usuario llegue al simulador ya informado.
decisión 03
Buscador con filtros por tipo y «cerca de mí»
Mapa con marcadores por color, filtros por tipo de oficina y geolocalización opcional. El listado y el mapa se mantienen sincronizados para que localizar sea inmediato.
resultado
Encontrar la oficina adecuada pasa de leer una lista a reconocerla en el mapa de un vistazo.
/resultado — 07
Dos landing listas para desarrollo.
De wireframe a UI
Estructura, contenidos y diseño final de dos landing entregados y validados con el cliente.
Pensadas para SEO
Contenido orientado a keywords integrado en la experiencia, no como relleno.
Marca aplicada
Guías de estilo de Liberbank respetadas en tipografía, color y componentes.
Los resultados de este proyecto son cualitativos — no se publican KPIs que no puedan verificarse.
/reflexión — 08
Lo que me llevo.
qué funcionó
Tratar el SEO como parte del diseño y no como un requisito externo — el contenido que posiciona es el mismo que convierte.
qué fue difícil
Condensar toda la comparativa de una hipoteca —importes, TIN, TAE, plazos— sin saturar la vista ni perder rigor.
qué mejoraría hoy
Validar el simulador con usuarios reales midiendo dónde abandonan — la estructura fue sólida, faltó test de usabilidad final.
